<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>loading...</title>
    <link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" href="css/ScaleControl.css">
</head>
<body>
<div id="app" v-cloak>
    <header>
        <title-bar></title-bar>
        <section>
            <!-- 一级菜单 -->
            <div class="toolbar">
                <button class="toolbar-item" name="chosefile" v-on:click="toolbarFn" :class="{'active-1': toolbar.drop == 'chosefile'}">
                    <i class="icon icon-folder-open"></i> 选择文件
                </button>
                <button class="toolbar-item" name="chosedir" v-on:click="toolbarFn" :title="'选择输出目录，当前：'+output" :class="{'active-1': toolbar.drop == 'chosedir'}">
                    <i class="icon icon-floppy-disk"></i> 保存目录
                </button>
                <button class="toolbar-item" name="batch" v-on:click="toolbarFn" :class="{'active-1': toolbar.drop == 'batch'}">
                    <i class="icon icon-cog"></i> 批量设置
                </button>
                <button class="toolbar-item" name="more" v-on:click="toolbarFn" :class="{'active-1': toolbar.drop == 'more'}">
                    <i class="icon icon-list"></i> 更多功能
                </button>
                <button class="toolbar-item start-btn" v-on:click="convertFn" :class="{'active-1': isStarted}">
                    <i class="icon icon-stack"></i> {{isStarted ? '停止':'开始'}}
                </button>
                <input class="toolbar-item" type="range" min=".19" max=".98" step="0.01" v-on:input="zoomItemFn">
            </div>

            <!-- 二级菜单 -->
            <ul class="submenu" :class="{'zoom-in':toolbar.drop=='more'}" :style="{top:toolbar.y+'px',left:toolbar.x+'px'}" v-drag>
                <li data-drag class="drag-bar"></li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="capture" v-on:click="toolbarFn" :class="{'active-1': toolbar.drop == 'capture'}">
                        <i class="icon icon-camera"></i> 屏幕录制
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="pdf2pic" v-on:click="toolbarFn">
                        <i class="icon icon-library"></i> PDF转图片
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="sprite" v-on:click="toolbarFn" :class="{'active-1': toolbar.drop == 'sprite'}">
                        <i class="icon icon-table2"></i> 图片拼接
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="concat" v-on:click="toolbarFn">
                        <i class="icon icon-loop"></i> 音/视频拼接
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="mix" v-on:click="toolbarFn">
                        <i class="icon icon-shuffle"></i> 音/视频混合
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="firstAid" v-on:click="toolbarFn">
                        <i class="icon icon-aid-kit"></i> 崩溃急救
                    </button>
                </li>
                <li class="submenu-item">
                    <button class="submenu-btn" name="helpBook" v-on:click="toolbarFn">
                        <i class="icon icon-book"></i> 帮助文档
                    </button>
                </li>
            </ul>
            <!-- 参数设置面板 -->
            <!-- batch -->
            <div class="drop-panel" :class="{'zoom-in':toolbar.drop=='batch'}" :style="{top:toolbar.y+'px',left:toolbar.x+'px'}" v-drag>
                <div data-drag class="drag-bar"></div>
                <div class="drop-panel-group">
                    <p>
                        压缩速度级别：
                        <select v-model.lazy="batchParams.speed">
                            <option value="ultrafast">无敌快</option>
                            <option value="superfast">超级快</option>
                            <option value="veryfast">非常快</option>
                            <option value="faster">比较快</option>
                            <option value="fast">正常快</option>
                            <option value="medium">普通</option>
                            <option value="slow">正常慢</option>
                            <option value="slower">比较慢</option>
                            <option value="veryslow">非常慢</option>
                            <option value="placebo">超级慢</option>
                        </select>
                        （速度越慢效果越好）
                    </p>
                    <p>
                        宽度上限(<i class="icon icon-pushpin" title="只对锁定项目生效"></i>)：
                        <input type="number" min="0" v-on:input="batchParamsFn($event,'widthLimit')" :value="batchParams.widthLimit" ref="widthLimitEl">
                        &times;
                        高度上限(<i class="icon icon-pushpin" title="只对锁定项目生效"></i>)：
                        <input type="number" min="0" v-on:input="batchParamsFn($event,'heightLimit')" :value="batchParams.heightLimit" ref="heightLimitEl">
                    </p>
                    <p>
                        大小上限(<i class="icon icon-pushpin" title="只对锁定项目生效"></i>)：
                        <input type="number" min="0" ref="sizeLimitEl" value="0"> MB
                    </p>
                </div>
                <div class="drop-panel-group">
                    <control-logo v-on:logo="logoFn"></control-logo>
                </div>
                <div class="drop-panel-group">
                    <p>
                        输出名称(<i class="icon icon-pushpin" title="只对锁定项目生效"></i>)：
                        <input type="text" v-model="batchParams.nameAll" title="名称末尾用0填充，如“00”表示01，02，03...">
                        <button class="btn-s" v-on:click="nameAllFn(1)">移动</button>
                        <button class="btn-s" v-on:click="nameAllFn(2)">复制</button>
                    </p>
                    <b>名称以最末尾的数字串为序列号累加，如：</b>
                    <p class="tip">
                        “000”表示：001，002，003，...<br>
                        “11”表示：12，13，14，...<br>
                        “00”为默认值：01，02，03...
                    </p>
                    <b>以mp4为例预览：</b>
                    <p class="tip">{{batchParams.nameAll | viewNamemat}}</p>
                </div>
                <div class="drop-panel-group text-center">
                    <button class="btn-s" v-on:click="batchParamsFn($event,0)">确定</button>
                    <button class="btn-s" v-on:click="batchParamsFn($event,1)">重置</button>
                    <button class="btn-s" v-on:click="batchParamsFn($event,-1)">取消</button>
                </div>
            </div>
            <!-- capture -->
            <div class="drop-panel" :class="{'zoom-in':toolbar.drop=='capture'}" :style="{top:toolbar.y+'px',left:toolbar.x+'px'}" v-drag>
                <div data-drag class="drag-bar"></div>
                <div class="drop-panel-group">
                    <h3>【参数设置】：</h3>
                    <p>
                        选择录制模式：
                        <select v-on:change="captureFn($event, 1)">
                            <option value="0">全屏有声视频</option>
                            <option value="1">小屏有声视频</option>
                            <option value="2">全屏无声视频</option>
                            <option value="3">小屏无声视频</option>
                            <option value="4">无画面仅录音</option>
                        </select>
                    </p>
                    <p>视频输出帧速率：<input type="number" v-model.lazy="capParams.fps" :disabled="capParams.mode==4">fps</p>
                    <p>视频输出比特率：<input type="number" v-model.lazy="capParams.bitv" :disabled="capParams.mode==4">kb/s</p>
                    <p>音频输出比特率：<input type="number" v-model.lazy="capParams.bita" :disabled="capParams.mode==2 || capParams.mode==3"/>kb/s</p>
                    <p>音频录制设备：
                        <select v-if="capParams.audioDevices.length > 0" v-model.lazy="capParams.audioDevice" :disabled="capParams.mode==2 || capParams.mode==3">
                            <option v-for="audioDevice of capParams.audioDevices" :value="audioDevice">{{audioDevice}}</option>
                        </select>
                        <select v-else :disabled="capParams.mode==2 || capParams.mode==3">
                            <option value="">无录音设备</option>
                        </select>
                        <button class="btn-s" v-on:click="captureFn($event,2)" :disabled="capParams.mode==2 || capParams.mode==3"><i class="icon icon-refrash"></i>扫描录音设备</button>
                    </p>
                    <p>输出后匹配宽度： <input type="number" v-model.lazy="capParams.widthLimit" :disabled="capParams.mode==4">px</p>
                    <p>当前录制区域：
                        <button class="btn-s" v-on:click="captureFn($event,3)" :disabled="capParams.mode!=1 && capParams.mode!=3">调整录制区域</button>
                        <span class="text-indent tip">顶部: {{capParams.y}} px &nbsp;&nbsp; 左边: {{capParams.x}} px </span>
                        <span class="text-indent tip">宽度: {{capParams.width}} px &nbsp;&nbsp; 高度: {{capParams.height}} px </span>
                    </p>
                </div>
                <div class="drop-panel-group text-center">
                    <button class="btn-s" v-on:click="captureFn($event,0)">开始录制</button>
                    <button class="btn-s" v-on:click="captureFn($event,-1)">取消</button>
                </div>
            </div>
            <!-- sprite -->
            <div class="drop-panel" :class="{'zoom-in':toolbar.drop=='sprite'}" :style="{top:toolbar.y+'px',left:toolbar.x+'px'}" v-drag>
                <div data-drag class="drag-bar"></div>
                <div class="drop-panel-group">
                    <p>排列方式：
                        <select v-on:change="spriteFn('matrix',$event)">
                            <option value="1">横向</option>
                            <option value="2">竖向</option>
                        </select>
                        <select v-on:change="spriteFn('align', $event)" ref="spriteAlign">
                            <optgroup v-if="sprite.align == 2">
                                <option value="1">左边对齐</option>
                                <option value="2">居中对齐</option>
                                <option value="3">右边对齐</option>
                                <option value="4">匹配宽度</option>
                            </optgroup>
                            <optgroup v-else>
                                <option value="1">顶部对齐</option>
                                <option value="2">居中对齐</option>
                                <option value="3">底部对齐</option>
                            </optgroup>
                        </select>
                    </p>
                    <details>
                        <summary>高级样式</summary>
                        <p>布局css样式编辑：</p>
                        <b>画板：</b>
                        <textarea v-model="sprite.listCss" rows="3" cols="50"></textarea><br>
                        <b>图框：</b>
                        <textarea v-model="sprite.itemCss" rows="5" cols="50"></textarea><br>
                        <b>图片：</b>
                        <textarea v-model="sprite.imgCss" rows="8" cols="50"></textarea>
                        <p class="tip">
                            <b>写法如(英文半角)：</b><br>
                            <span class="text-indent">width: 50%;</span>
                            <span class="text-indent">height: 50%;</span>
                            <span class="text-indent">padding: 5px;</span>
                        </p>
                    </details>
                    <p class="text-right"><label>预览 <input type="checkbox" v-model="sprite.preview"></label></p>
                </div>
                <div class="drop-panel-group text-center">
                    <button class="btn-s" v-on:click="spriteFn(0)">确定</button>
                    <button class="btn-s" v-on:click="spriteFn(-1)">取消</button>
                </div>
            </div>
        </section>
    </header>
    <main class="body">
        <section class="item-list" v-if="!sprite.preview">
            <dl class="item" v-for="(item,index) of items" :style="'width:'+viewWidth+'px'">
                <dt class="item-preview">
                    <div class="item-preview-inner" :class="{alpha: item.alpha}" 
                    :style="{
                        padding: item.scale<viewScale ? (viewWidth*(viewScale-item.scale)/2+'px 0') : ('0 '+viewWidth*(1-viewScale/item.scale)/2+'px'),
                        height: (viewWidth * viewScale)+'px'
                    }">
                        <div class="item-preview-centent">
                            <!-- play button -->
                            <div class="play-btn" v-on:click="videoFn($event,index)" v-if="item.canplay">
                                <i class="play-btn-icon icon icon-play2" :class="{playing: item.playing}"></i>
                            </div>
                            <!-- file -->
                            <video v-if="item.thumb" class="item-preview-img" :ref="'id'+index" :src="item.path" :poster="item.thumb" v-on:timeupdate="videoFn($event,index,'timeupdate')" v-on:play="videoFn($event,index,'play')" v-on:pause="videoFn($event,index,'pause')"></video>
                            <!-- loading icon -->
                            <div class="loading" v-else><i class="loading-icon icon icon-spinner9"></i></div>
                            <!-- logo -->
                            <img class="item-logo" :ref="'logo'+index" :style="{top:item.logoY+'%',left:item.logoX+'%', width: item.logoSize+'%'}" v-show="item.logo && item.currentTime>=item.logoStart && item.currentTime<=item.logoEnd" :src="item.logo" v-on:click="logoControlFn($event,index)">
                        </div>
                    </div>
                    <div class="item-tools">
                        <i class="float-l item-media-type icon" :class="{'icon-image':item.type=='image', 'icon-video-camera': item.type=='video', 'icon-headphones':item.type=='audio'}"></i>
                        <i class="item-tool icon icon-pushpin" v-on:click="itemFn($event,index,'lock')" v-on:contextmenu.prevent="itemFn($event,index,'lockAll')" title="锁定/解锁（右击锁定/解锁全部文件）" :class="{active: item.lock}"></i>
                        <i class="item-tool icon icon-contrast" v-on:click="itemFn($event,index,'alpha')" v-on:contextmenu.prevent="itemFn($event,index,'alphaAll')" title="显示/隐藏alpha通道（右击显示/隐藏全部文件）" :class="{active: item.alpha}"></i>
                        <i class="item-tool icon icon-bin" v-on:click="itemFn($event,index,'del')"  v-on:contextmenu.prevent="itemFn($event,index,'delAll')" title="删除（右击删除全部文件）"></i>
                    </div>
                </dt>
                <dd class="item-row">
                    <ul class="item-controls scale-0" :class="{'zoom-in': item.duration}">
                        <li class="item-controls-row">
                            <input class="item-range-time" type="range"
                                   v-on:input="itemFn($event,index,'currentTime')"
                                   v-on:change="itemFn($event,index,'timeSlide')"
                                   :style="'background-image: linear-gradient(90deg, #888, #888 '+item.startTime/item.duration*100+'%,'+
                                   'transparent '+item.startTime/item.duration*100+'%,'+
                                   (item.logo ?
                                   'transparent '+item.logoStart/item.duration*100+'%,'+
                                   '#a00 '+item.logoStart/item.duration*100+'%,'+
                                   '#a00 '+item.logoEnd/item.duration*100+'%,'+
                                   'transparent '+item.logoEnd/item.duration*100+'%,' : '')+
                                   'transparent '+item.endTime/item.duration*100+'%,'+
                                   '#888 '+item.endTime/item.duration*100+'%, #888)'"
                                   :value="item.currentTime" min="0" :max="item.duration" step="0.001" title="时间控制">
                        </li>
                        <li class="item-controls-row text-center">
                            微调：{{item.currentTime | timemat}}
                            <button class="btn-s" :title="'上'+framestep+'帧'" v-on:click="itemFn($event,index,'prevFrame')"><i class="icon icon-previous2"></i></button>
                            <input class="item-number" type="number" v-model="framestep" title="设置微调量">
                            <button  class="btn-s" :title="'下'+framestep+'帧'" v-on:click="itemFn($event,index,'nextFrame')"><i class="icon icon-next2"></i></button>
                            {{item.currentTime*item.fps | mathRound}}/{{item.duration*item.fps | mathRound}}
                        </li>
                    </ul>
                </dd>
                <dd class="item-row">
                    <control-logo v-on:logo="logoFn" :param="index" :item="item"></control-logo>
                </dd>
                <dd class="item-row">
                    <div class="item-old">
                        <b>输入参数：</b>
                        <span class="float-r" v-if="item.type === 'image'">
                            <input class="item-checkbox" type="checkbox" v-model="item.series" title="是否是序列图"> 序列图
                        </span>
                    </div>
                    <div class="item-new"><b>输出参数：</b>
                        <i class="item-tool icon icon-undo2 float-r" v-on:click="itemFn($event,index,'reset')" title="重置"></i>
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">文件：{{item.name}}</div>
                    <div class="item-new"><input class="item-toname" type="text" v-model.lazy="item.toname" title="输出名称"></div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">格式：{{item.format}}</div>
                    <div class="item-new">
                        <select class="item-select" v-on:input="itemFn($event,index,'toformat')" :value="item.toformat" title="输出类型">
                            <optgroup label="video">
                                <option value="mp4">mp4</option>
                                <option value="webm">webm</option>
                                <option value="ogg">ogg</option>
                            </optgroup>
                            <optgroup label="audio" v-if="item.type!=='image'">
                                <option value="mp3">mp3</option>
                                <option value="wav">wav</option>
                            </optgroup>
                            <optgroup label="image" v-if="item.type!=='audio'">
                                <option value="jpg">jpg</option>
                                <option value="png">png</option>
                                <option value="gif">gif</option>
                                <option value="jpeg">jpeg</option>
                                <option value="webp">webp</option>
                                <option value="ico">ico</option>
                                <option value="bmp">bmp</option>
                            </optgroup>
                        </select>
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">大小：{{item.size | sizemat}}</div>
                    <div class="item-new scale-0" :class="item.type === 'video'?'zoom-in':''">
                        {{item.size*item.quality/100 | sizemat}}
                        <input class="item-number" type="number" v-model.number="item.quality" title="输出质量">%
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">截取：{{item.duration | timemat}}</div>
                    <div class="item-new scale-0" :class="item.duration?'zoom-in':''">
                        <button class="btn-s" v-on:click="itemFn($event,index,'setstart')" title="点击即获取当前时间">{{item.startTime | timemat}}</button>
                        - 
                        <button class="btn-s" v-on:click="itemFn($event,index,'setend')" title="点击即获取当前时间">{{item.endTime | timemat}}</button>
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">预览图：{{item.startTime | timemat}}</div>
                    <div class="item-new scale-0" :class="(item.type!=='audio' && item.totype!=='audio' && !item.series)?'zoom-in':''">
                        <input class="item-checkbox" type="checkbox" v-model="item.cover" title="是否生成预览图">
                        <button class="btn-s" v-on:click="itemFn($event,index,'setcover')" title="点击即获取当前时间" v-if="item.cover && item.duration>0">{{item.coverTime | timemat}}</button>
                        <input class="item-number" type="number" v-model.number="item.coverWidth" :disabled="!item.cover" title="设置预览图尺寸">px
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">尺寸：{{item.width}}&times;{{item.height}}</div>
                    <div class="item-new scale-0" :class="(item.width && item.height)?'zoom-in':''">
                        <input class="item-number" type="number" min="0" v-on:input="itemFn($event,index,'towidth')" :value="item.towidth" title="输出宽">
                        &times;
                        <input class="item-number" type="number" min="0" v-on:input="itemFn($event,index,'toheight')" :value="item.toheight" title="输出高">
                        px
                    </div>
                </dd>
                <dd class="item-row">
                    <div class="item-old">分离提取:
                        {{item.vchannel}}
                        {{item.achannel}}
                        {{item.aclayout}}
                    </div>
                    <div class="item-new scale-0" :class="((item.aclayout>1 || (item.achannel && item.vchannel)) && item.totype!=='image')?'zoom-in':''">
                        <input class="item-checkbox" type="checkbox" v-model="item.split" title="分离提取音频声道和视频"> {{item.split ? '是':'否'}}
                    </div>
                    <button class="start-btn start-one" v-on:click="convertFn($event, index)">{{isStarted ? '停止':'开始'}}</button>
                </dd>
                <dd class="item-mask" v-show="item.progress">
                    <div class="item-progress-loaded" :style="{width: item.progress+'%'}"></div>
                    <div class="item-progress-txt">{{item.progress}} %</div>
                </dd>
            </dl>
        </section>
        <section id="sprite-list" class="sprite-list alpha" v-if="sprite.preview" :style="sprite.listCss">
            <template v-for="(item,index) of items">
                <span class="sprite-item" :style="sprite.itemCss">
                    <img class="sprite-img" :src="item.path" :style="sprite.imgCss">
                </span>
                <br v-if="sprite.align == 2">
            </template>
        </section>
    </main>
    <footer-bar></footer-bar>
</div>

<!-- dialog -->
<div id="dialog" class="dialog-outer" :class="{'dialog-show': show}">
    <div class="dialog-inner">
        <div class="dialog-header">
            <span v-html="title"></span> <i class="icon icon-cross dialog-close" v-on:click="dialogFn($event, -1)"></i>
        </div>
        <div class="dialog-body" v-html="body"></div>
        <div class="dialog-footer">
            <button class="dialog-btn" v-for="(btn,code) in btns" v-on:click="dialogFn($event, code)">{{btn}}</button>
        </div>
    </div>
</div>

<!-- contextmenu -->
<div id="contextmenu" class="contextmenu" :style="{top:y+'px',left:x+'px'}">
    <menu-tree v-if="items" :items="items" v-on:click.native="contextmenuFn" :class="{'tree-show':show}"></menu-tree>
</div>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>